<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Galleria Classic Theme</title>
        <style>
        
            /* Demo styles */
            html,body{background:#222;margin:0;}
            body{border-top:4px solid #000;}
            .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;}
            h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
            p{margin:0 0 20px}
            a {color:#22BCB9;text-decoration:none;}
            .cred{margin-top:20px;font-size:11px;}
            
            /* This rule is read by Galleria to define the gallery height: */
            #galleria{height:320px;}
            
        </style>
        
        <!-- load jQuery -->
        <script src="jquery-1.3.1.js"></script>
        
        <!-- load Galleria -->
        <script src="../../galleria-1.2.2.js"></script>


    </head>
<body>
    <div class="content">
        <h1>Galleria Classic Theme</h1>
        <p>Demonstrating a basic gallery example.</p>
        
        <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->
        
        <div id="galleria">
            <a href="1.jpg">
            	<img title="Locomotives Roundhouse"
            	     alt="Steam locomotives of the Chicago &amp; North Western Railway." 
            	     src="s1.jpg">
        	</a>
            <a href="2.jpg">
            	<img title="Locomotives Roundhouse"
            	     alt="Steam locomotives of the Chicago &amp; North Western Railway." 
            	     src="s2.jpg">
        	</a>
            <a href="3.jpg">
            	<img title="Locomotives Roundhouse"
            	     alt="Steam locomotives of the Chicago &amp; North Western Railway." 
            	     src="s3.jpg">
        	</a>
            <a href="4.jpg">
            	<img title="Locomotives Roundhouse"
            	     alt="Steam locomotives of the Chicago &amp; North Western Railway." 
            	     src="s4.jpg">
        	</a>
            <a href="1.jpg">
            	<img title="Locomotives Roundhouse"
            	     alt="Steam locomotives of the Chicago &amp; North Western Railway." 
            	     src="s1.jpg">
        	</a>
            <a href="2.jpg">
            	<img title="Locomotives Roundhouse"
            	     alt="Steam locomotives of the Chicago &amp; North Western Railway." 
            	     src="s2.jpg">
        	</a>
            <a href="3.jpg">
            	<img title="Locomotives Roundhouse"
            	     alt="Steam locomotives of the Chicago &amp; North Western Railway." 
            	     src="s3.jpg">
        	</a>
        </div>
        
        <p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p>
    </div>
		    <script>

    // Load the classic theme
    Galleria.loadTheme('galleria.classic.min.js');
    
    // Initialize Galleria
    $('#galleria').galleria();

    </script>
    </body>
</html>